<template>
<div class="two">
    <div class="title">
        提高效率
    </div>
    <div class="item">
        <div class="title">
            全流程在线工作
        </div>
        <div class="item_list">
            <div :class="{
                    item:true,
                    on_item:item_index == index,
                }"
                @click="$refs.carousel.setActiveItem(index)"
                v-for="(item,index) in item_list" :key="index">
                {{item}}
            </div>
        </div>
        <el-carousel ref="carousel" indicator-position="outside" @change="item_index = $event">
            <div class="carousel_container">
                <el-carousel-item>
                    <div class="one">
                        <div class="img">
                            <img src="@/assets/photo/two1.png" alt="">
                        </div>
                        <div class="text">
                            <ul>
                                <li>
                                    <div class="title">业务合同</div>
                                    <div class="text_item">
                                        <span>自动生成合同</span> 多终端线上审批，支持合同在线电子签章授权
                                    </div>
                                    <div class="text_item">
                                        <span>合同评审</span> 支持合同模版自定义配置，自动生成合同样本
                                    </div>
                                </li>
                                <li>
                                    <div class="title">业务订单</div>
                                    <div class="text_item">
                                        <span>业务订单</span> 在线配置订单详情页面，并可通过电脑/手机创建
                                    </div>
                                    <div class="text_item">
                                        <span>评审配置</span> 在线配置订单评审流程，并可通过电脑/手机进行评审工作
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="two">
                        <div class="img">
                            <img src="@/assets/photo/two2.svg" alt="">
                        </div>
                        <div class="text">
                            <ul>
                                <li>
                                    <span>详情配置</span>
                                </li>
                                <li>
                                    <span>流程引擎配置</span>
                                </li>
                                <li>
                                    <span>二维码标签</span>
                                </li>
                                <li>
                                    <span>工作提醒</span>
                                </li>
                                <li>
                                    <span>检测数据录入</span>
                                </li>
                                <li>
                                    <span>复核审批</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="three">
                        <div class="item_item item_one">
                            <div class="left">
                                <img src="@/assets/photo/two3-1.png" alt="">
                            </div>
                            <div class="right">
                                <div class="title">
                                    在线编辑
                                </div>
                                <div class="content">
                                    对样品的检测原始数据在线进行结果判定、报告说明信息编辑
                                </div>
                            </div>
                        </div>
                        <div class="item_item item_two">
                            <div class="left">
                                <img src="@/assets/photo/two3-2.png" alt="">
                            </div>
                            <div class="right">
                                <div class="title">
                                    在线编辑
                                </div>
                                <div class="content">
                                    对样品的检测原始数据在线进行结果判定、报告说明信息编辑
                                </div>
                            </div>
                        </div>
                        <div class="item_three">
                            <img src="@/assets/photo/two3.png" alt="">
                        </div>
                        <div class="item_item item_four">
                            <div class="left">
                                <img src="@/assets/photo/two3-3.png" alt="">
                            </div>
                            <div class="right">
                                <div class="title">
                                    在线编辑
                                </div>
                                <div class="content">
                                    对样品的检测原始数据在线进行结果判定、报告说明信息编辑
                                </div>
                            </div>
                        </div>
                        <div class="item_item item_five">
                            <div class="left">
                                <img src="@/assets/photo/two3-4.png" alt="">
                            </div>
                            <div class="right">
                                <div class="title">
                                    在线编辑
                                </div>
                                <div class="content">
                                    对样品的检测原始数据在线进行结果判定、报告说明信息编辑
                                </div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="four">
                        <div class="img">
                            <img src="@/assets/photo/two4.png" alt="">
                        </div>
                        <div class="text">
                            <ul>
                                <li>
                                    <span>预约提醒</span>
                                </li>
                                <li>
                                    <span>审批提醒</span>
                                </li>
                                <li>
                                    <span>超时提醒</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div class="five">
                        <div class="img">
                            <img src="@/assets/photo/two5.png" alt="">
                        </div>
                        <div class="text">
                            <ul>
                                <li>
                                    <span>预约提醒</span>
                                </li>
                                <li>
                                    <span>审批提醒</span>
                                </li>
                                <li>
                                    <span>超时提醒</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-carousel-item>
            </div>
        </el-carousel>
    </div>
    <div class="item">
        <div class="title">
            任务驱动
        </div>
        <div class="container">
            <div class="img">
                <img src="@/assets/photo/two6.png" alt="">
            </div>
            <div class="text">
                <ul>
                    <li>
                        <span>预约提醒</span>
                    </li>
                    <li>
                        <span>审批提醒</span>
                    </li>
                    <li>
                        <span>超时提醒</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'Two',
    data(){
        return{
            item_index:0,
            item_list:['业务管理工作','检测检验工作','报告编制工作','质量管理工作','设备耗材管理'],
        };
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.two{
    width: 100%;
    background-color: #f5fcf9;
    display: flex;
    flex-direction: column;
    align-items:center;
    >.title{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 32px;
        font-weight: 600;
    }
    >.item{
        border-radius: 5px;
        max-width: 1100px;
        width: 100%;
        padding: 40px;
        background: #fff;
        margin-bottom: 32px;
        box-sizing: border-box;
        >.title{
            text-align: center;
            font-size: 24px;
        }
        >.item_list{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px;
            >.item{
                margin: 0 25px;
                font-size: 18px;
                border-radius: 5px;
                padding: 3px 10px;
                transition: all 0.2s;
                cursor: pointer;
                &:hover{
                    background-color: #37c186;
                    color: whitesmoke;
                    opacity: 0.8;
                }
            }
            >.on_item{
                background-color: #37c186;
                color: whitesmoke;
            }
        }
        .carousel_container{  //轮播图容器
            width: 100%;
            ul{
                margin: 0 auto;
                padding: 0;
                font-size: 14px;
                width: fit-content;
                li{
                    margin-bottom: 43px;
                    color: #37c186;
                    text-align: left;
                }
            }
            /deep/.el-carousel__item{
                >.one{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    >.text{
                        width: 100%;
                        margin-left: 40px;
                        .title{
                            font-size: 20px;
                            margin-bottom: 20px;
                            color: #000;
                        }
                        .text_item{
                            font-size: 14px;
                            margin: 5px 0;
                            color: rgb(94, 94, 94);
                            line-height: 20px;
                            span{
                                color: #000;
                                font-size: 14px;
                            }
                        }
                    }
                }
                >.two{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    background-color: white;
                    height: 100%;
                    .img{
                        margin-bottom: 50px;
                    }
                    ul{
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr;
                        grid-column-gap: 100px;
                        span{
                            color: #2c3e50;
                            font-size: 15px;
                        }
                    }
                }
                >.three{
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    grid-template-rows: 1fr 1fr;
                    grid-column-gap: 20px;
                    grid-template-areas: 'item_one item_three item_two' 'item_four item_three item_five';
                    >.item_one{
                        grid-area: item_one;
                    }
                    >.item_two{
                        grid-area: item_two;
                    }
                    >.item_three{
                        grid-area: item_three;
                    }
                    >.item_four{
                        grid-area: item_four;
                    }
                    >.item_five{
                        grid-area: item_five;
                    }
                    >.item_item{
                        display: flex;
                        justify-content: space-between;
                        margin-top:40px;
                        >.right{
                            margin-left: 20px;
                            text-align: left;
                            >.title{
                                font-size: 20px;
                                margin-bottom: 20px;
                            }
                            >.content{
                                font-size: 15px;
                                line-height: 25px;
                            }
                        }
                    }
                }
                >.four{
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    >.img{
                        border-radius: 5px;
                        overflow: hidden;
                    }
                    >.text{
                        margin-left: 50px;
                        ul{
                            margin: 0 auto;
                            padding: 0;
                            font-size: 14px;
                            width: fit-content;
                            li{
                                margin-bottom: 43px;
                                color: #37c186;
                                span{
                                    color: #000;
                                    font-size: 16px;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
                >.five{
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    >.img{
                        border-radius: 5px;
                        overflow: hidden;
                    }
                    >.text{
                        margin-left: 50px;
                        ul{
                            margin: 0 auto;
                            padding: 0;
                            font-size: 14px;
                            width: fit-content;
                            li{
                                margin-bottom: 43px;
                                color: #37c186;
                                span{
                                    color: #000;
                                    font-size: 16px;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }
        }
        >.container{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >.text{
                width: 100%;
                ul{
                    margin: 0 auto;
                    padding: 0;
                    font-size: 14px;
                    width: fit-content;
                    li{
                        margin-bottom: 43px;
                        color: #37c186;
                        span{
                            color: #000;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}
</style>
